<template >
<div>
  123
<el-row>
  <el-col>
    <el-button type="primary" @click="addvisible=true">添加角色</el-button >
  </el-col>
</el-row>
  <el-table :data="rolelist">
  <el-table-column type="index" label="#"></el-table-column>
  <el-table-column prop="roleName" label="角色名称" ></el-table-column>
  <el-table-column prop="roleDesc" label="角色描述" ></el-table-column>
  <el-table-column  label="操作" width="300px">
    <template  slot-scope="scope">
    <el-button type="primary" icon="el-icon-edit" size="mini" @click="updatagetrole(scope.row.id)">编辑</el-button>
    <el-button type="danger" icon="el-icon-edit"   size="mini" @click="deleteroles(scope.row.id)">删除</el-button>
    <el-button type="warning" icon="el-icon-edit"  size="mini" >分配权限</el-button>
    </template>
  </el-table-column>
  </el-table>
  <!--对话框-->
 <el-dialog title="增加角色" :visible.sync="addvisible" @close="addclose" width="50%">
    <el-form :model="addrole"
             ref="addformref" label-width="70px">
      <el-form-item label="角色名称" >
        <el-input v-model="addrole.roleName"  ></el-input>
      </el-form-item>
      <el-form-item label="角色描述" >
        <el-input v-model="addrole.roleDesc" >
        </el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="addvisible=false">取 消</el-button>
      <el-button type="primary" @click="addroles">确 定</el-button>
    </div>
  </el-dialog>


  <!--修改对话框 @close修改之后重置对话框的数据-->
  <el-dialog title="修改角色" :visible.sync="updatavisible" @close="updataclose" width="50%">
    <el-form :model="updatarole"
             ref="updataformref" label-width="70px">
      <el-form-item label="角色名称" >
        <el-input v-model="updatarole.roleName" disabled ></el-input>
      </el-form-item>
      <el-form-item label="角色描述" >
        <el-input v-model="updatarole.roleDesc" >
        </el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="updatavisible=false">取 消</el-button>
      <el-button type="primary" @click="updataroles">确 定</el-button>
    </div>
  </el-dialog>

</div>
</template>

<script>
export default {
  name: "roles",
  data(){
    return{
      rolelist:[],
      updatavisible:false,
      addvisible:false,
      addrole:{
        roleName:"",
        roleDesc:""
      },
      updatarole:{
  }
    }
  },
  created(){
    this.getrolelist()

  },
  methods:{
    //表单预校验关闭对话框的回调，才能把数据传回去
    addclose() {
      this.$refs.addformref.resetFields()
    },
    updataclose(){
      this.$refs.updataformref.resetFields()
    },
    //修改之前先查询用户数据
    async updatagetrole(id){
      const {data:res}= await this.$http.get('roles/'+id)
      if(res.meta.status!==200){
        return this.$message.error("获取用户信息失败")
      }
      this.updatarole=res.data
      this.updatavisible=true
      return this.$message.success("获取用户信息成功")
    },
    //修改
    async updataroles(){
      const {data:res}= await this.$http.put(
          'roles/'+this.updatarole.roleId,
          {
        roleName:this.updatarole.roleName,
        roleDesc:this.updatarole.roleDesc
      })
      if(res.meta.status!==200){
        return this.$message.error("xiug失败" )
      }
      this.$message.success("xiug成功")
      await this.getrolelist()
      this.updatavisible=false
    },
    //删除
    async deleteroles(id){
      const confirm = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      //如果返回confirm则表示用户确认删除
      //如果返回cancel则表示用户取消删除

      if (confirm !== 'confirm'){
        return this.$message.error("取消")
      }
      const {data:res}=await this.$http.delete('roles/'+id)
      if(res.meta.status!==200){
        this.$message.error("删除失败")
      }
      await this.getrolelist()
      return   this.$message.success("删除成功")

    },
    async addroles(){
     const {data:res}= await this.$http.post('roles',this.addrole)
      if(res.meta.status!==201){
        return this.$message.error("增加失败" )
      }
      this.$message.success("增加成功")
      await this.getrolelist()
      this.addvisible=false


    },
   async  getrolelist() {
      const {data:res}=await this.$http.get('roles')
     if(res.meta.status!==200){
       return this.$message.error("获取角色列表失败")
     }
     this.rolelist=res.data
     console.log(this.rolelist)
  },

  }
}
</script>

<style scoped>

</style>
